class Cart {
    constructor() {
        //  获取元素  
        this.cartTable = document.querySelector('.cartTable')
        this.tbody = document.querySelector('tbody')
        this.totalNum = document.querySelector('.totalNum')
        this.money = document.querySelector('.money')
        this.selectAll = document.querySelector('.selectAll')
        this.cartList = JSON.parse(localStorage.getItem('cart')) || []
        console.log(this.cartList)
        this.init()
    }
    init() {
        this.render()
        this.handleClick()
    }
    render() {
        console.log(this.cartList)
        this.tbody.innerHTML = ''
        if (this.cartList.length > 0) {
            this.cartList.forEach((item) => {
                this.tbody.innerHTML += `
                                            
                            <tr>
                            <td><input type="checkbox" value="" class="select" data-id="${item.id}" ${item.is_select?'checked':''} /></td>
                            <td>
                                <img src="${item.picture}" >
                                <span class="hide">${item.name}</span>
                                <span class="hide">${item.desc}</span>
                            </td>
                            <td><span>${item.price}</span></td>
                            <td>
                                <span class="sub" data-id="${item.id}">-</span>
                                <input type="text" value="${item.cart_number}" class="txt" data-id="${item.goods_id}"/>
                                <span class="add" data-id="${item.id}">+</span>
                            </td>
                            <td><span class="price">${item.price * item.cart_number}元</span></td>
                            <td><span class="del" data-id="${item.id}">删除</span></td>
                            </tr>
                         `
            });

        } else {
            this.tbody.innerHTML = `
           <tr height="100">
           <td colspan="6">
               <h1>再忙，也要记得买点什么犒赏自己~！<a href="../index.html">Go</a></h1>
           </td>
          </tr>
           `
        }
        this.count()
        //  把数据重新存储一下  

        localStorage.setItem('cart', JSON.stringify(this.cartList))

    }
    handleClick() {
        this.cartTable.onclick = (e) => {
            var e = e || window.event
            var target = e.target || e.srcElement
            // 做全选功能 
            if (target.className == 'selectAll') {
                //   console.log(target.checked)
                this.cartList.forEach((item) => {
                    item.is_select = target.checked
                })
                this.render()
            }
            // 做单选  
            if (target.className == 'select') {
                let targetId = target.dataset.id
                let goods = this.cartList.find((item) => {
                    return item.id == targetId
                })
                goods.is_select = target.checked
                // this.selectAll.checked = this.cartList.every((item) => {
                //     return item.is_select
                // })

                this.render()
            }
            // 数量增加的功能
            if (target.className == 'add') {
                let targetId = target.dataset.id
                let goods = this.cartList.find((item) => {
                    return item.id == targetId
                })
                if (goods.cart_number == goods.goods_number) {
                    alert('亲！该件商品你只能买' + goods.goods_number + '件')
                    return
                } else {
                    goods.cart_number++
                }
                this.render()
            }

            // 数量减少的功能  
            if (target.className == 'sub') {
                let targetId = target.dataset.id
                let goods = this.cartList.find((item) => {
                    return item.id == targetId
                })
                if (goods.cart_number == 1) {
                    return
                } else {
                    goods.cart_number--
                }
                this.render()
            }
            //  删除功能  
            if (target.className == "del") {
                let targetId = target.dataset.id
                let goods = this.cartList.find((item) => {
                    return item.id == targetId
                })
                if (goods.is_select) {
                    if (confirm('你确定要删除该商品么？')) {
                        this.cartList = this.cartList.filter((item) => {
                            return item.id != targetId
                        })
                    }
                }
                this.render()
            }
            // 删除选中的多个
            if (target.className == 'dlAll') {
                console.log(this.cartList)
                if (confirm('你确定要删除这些商品么？')) {
                    this.cartList = this.cartList.filter((item) => {
                        return !item.is_select
                    })
                }
                this.render()

            }
            // 结算  
            if (target.className == 'calc') {
                //  if(this.totalNum.innerHTML)  
                if (this.totalNum.innerHTML > 0) {
                      location.href = "apply.html"  
                }
            }
        }
    }

    count() {

        let totalNum = 0
        let money = 0
        this.cartList.forEach((res) => {
            if (res.is_select) {
                totalNum += res.cart_number
                money += res.price * res.cart_number
            }
        })
        this.selectAll.checked = this.cartList.every((item) => {
            return item.is_select
        })
        this.totalNum.innerHTML = totalNum
        this.money.innerHTML = money
    }

}

new Cart()